<template>
	<view>
		<view class="p-r-30 pbox fl-s-c relative">
			<text class="fs-48 bold c-00 m-t-50 w-1">登录/注册</text>
			<text class="w-1 fs-28 m-t-15" style="color: #555555;">为了保障您的服务体验，请登录/注册后使用</text>
			<view class="qiebox fr-s-c">
				<view class="fr-c" @click="type=index" :class="type==index?'actbox':'itbox'"
					v-for="(item,index) in types" :key="index">{{item}}</view>
			</view>
			<view class="ibox fr-s-c" style="margin-top: 56rpx;">
				<image style="width: 48rpx; height: 48rpx;" :src="$path + '/login/phone.png'" mode=""></image>
				<text class="c-33 fs-28 bold">+86</text>
				<input type="number" maxlength="11" v-model="mobile" style="margin-left: 15rpx;" class="flex-1 fs-28"
					placeholder="请输入手机号码" />
			</view>
			<view class="ibox fr-s-c m-t-25" v-if="type==0">
				<image style="width: 48rpx; height: 48rpx;" :src="$path + '/login/security.png'" mode=""></image>
				<input type="number" maxlength="6" v-model="code" class="flex-1 m-l-15 fs-28" placeholder="请输入验证码" />
				<text class="c-main codebtn fr-c fs-20" @click="getCode">{{tips}}</text>
			</view>
			<view class="ibox fr-s-c m-t-25" v-if="type==1">
				<image style="width: 48rpx; height: 48rpx;" :src="$path + '/login/pwd.png'" mode=""></image>

				<input :password="pwd" v-model="password" type="text" class="flex-1 m-l-15 fs-28" placeholder="输入密码" />
				<!-- <up-icon @click="pwd=!pwd" :name="pwd?'eye-off':'eye'" size="40rpx" color="#454545"></up-icon> -->
				<text class="c-33 fs-24" @click="$u.route('/pages/Login/ForgetPwd')">忘记密码</text>
			</view>
			<!-- <view class="w-1 fr-b-c m-t-20" style="color: #606060;">
				<text class="fs-24" @click="$u.route('/pages/Login/Register')">注册账号</text>
				<text class="fs-24" @click="$u.route('/pages/Login/ForgetPwd')">忘记密码</text>
			</view> -->
			<view class="w-1 fr-s-c" style="display: flex;justify-content: space-between;">
				<view class="c-99 fr-s-c fs-24" style="padding: 35rpx 0;">
					<view class="fr-s-c" @click="agree=!agree">
						<image v-if="agree" style="width: 32rpx; height: 32rpx;" :src="$path + '/login/y.png'"></image>
						<image v-if="!agree" style="width: 32rpx; height: 32rpx;" :src="$path + '/login/n.png'"></image>
						<text class="m-l-10">我已阅读并同意</text>
					</view>
					<navigator class="c-main" url="/pages/RichText/RichText?type=3" hover-class="none">《用户协议》
					</navigator>
					<text class="c-main">和</text>
					<navigator class="c-main" url="/pages/RichText/RichText?type=2" hover-class="none">《隐私政策》
					</navigator>
				</view>
				<view class="" style="font-size: 24rpx;color: #01796D;display: flex;align-items: center;"
					@click="$u.route('/pages/Login/Register')">
					<image src="../../static/images/tab4/key.png" mode=""
						style="width: 24rpx;height: 28rpx;margin-right: 10rpx;min-width: 24rpx;">
					</image>
					注册
				</view>
			</view>
			<view class="r-btn fr-c bg-main c-ff" @click="login"
				style="border: none; margin-top: 60rpx; width: 564rpx;">登录</view>
			<!-- <view class="r-btn fr-c c-33 fs-32 m-t-20" @click="$u.route('/pages/Login/Register')" style="width: 564rpx;">注册</view> -->
			<view class="r-btn fr-c c-33 fs-32 m-t-20" @click="$u.route('/pagemaster/pages/Login/Login')"
				style="width: 564rpx;">师傅端登录</view>
			<view class="flex-1"></view>
			<!-- <text class="c-main fs-30" @click="$u.route('/pagemaster/pages/Login/Login')">我是师傅</text> -->
			<view style="height: 50rpx;"></view>
		</view>
		<up-code :seconds="seconds" ref="uCodeRef" @change="codeChange"></up-code>
	</view>
</template>

<script setup>
	import {
		storeToRefs
	} from 'pinia';
	import useUserStore from '@/stores/user.js';

	const {
		nowid
	} = storeToRefs(useUserStore())
	// const {getnum} = useUserStore()
	const types = ['验证码登录', '密码登录'];
	const type = ref(0)
	const first = ref(0);
	onLoad((o) => {
		// if (uni.$u.page().includes(uni.$u.pages()[0].route)) {
		// 	console.log('当前是第一页')
		// 	first.value = 1
		// } else {
		// 	console.log('不是第一页')
		// 	first.value = 0
		// }
	})

	onShow(() => {
		nowid.value = 1;
	})

	const tips = ref('');
	const seconds = ref(120);
	const uCodeRef = ref(null);
	const codeChange = (text) => {
		// console.log(text)
		tips.value = text;
	};

	const getCode = () => {
		if (!mobile.value) return uni.$u.toast('请输入手机号');
		if (uCodeRef.value.canGetCode) {
			// 模拟向后端请求验证码
			uni.showLoading({
				title: '正在获取验证码',
			});
			uni.$post({
				url: "/api/Sms/send",
				data: {
					mobile: mobile.value,
					event: 'login', // 注册传register 登录传login 忘记密码传pass 修改密码传 resetpwd 更换手机号传changemobile 微信登录绑定手机号传webind 验证是否是本机main 商家入驻 dplot 绑定银行卡 addpay
				}
			}).then(res => {
				uni.hideLoading();
				// 这里此提示会被start()方法中的提示覆盖
				uni.$u.toast('验证码已发送');
				// 通知验证码组件内部开始倒计时
				uCodeRef.value.start();
			})
		} else {
			uni.$u.toast('倒计时结束后再发送');
		}
	}

	const mobile = ref('')
	const code = ref('')
	const agree = ref(false)
	const pwd = ref(true)
	const password = ref('')

	function login() {
		if (!mobile.value) return uni.$u.toast('请输入手机号');
		if (!agree.value) return uni.$u.toast('请已阅读并同意用户协议和隐私政策');
		if (type.value == 0) {
			if (!code.value) return uni.$u.toast('请输入验证码');
			// 验证码

			// #ifdef MP-WEIXIN
			uni.login({
				success: (ret) => {
					uni.$post({
						url: '/api/user/mobilelogin',
						data: {
							mobile: mobile.value,
							captcha: code.value,
							group: 2,
							authcode: ret.code
						}
					}).then(res => {
						nowid.value = 1;
						const user = res.data.userinfo;
						uni.setStorageSync('user', user)
						getApp().tt(res.msg, 'success')
						setTimeout(() => {
							uni.switchTab({
								url: '/pages/index/index'
							})
						}, 1500)
					})
				}
			})
			// #endif


			// #ifndef MP-WEIXIN
			uni.$post({
				url: '/api/user/mobilelogin',
				data: {
					mobile: mobile.value,
					captcha: code.value,
					group: 2,
				}
			}).then(res => {
				nowid.value = 1;
				const user = res.data.userinfo;
				uni.setStorageSync('user', user)
				getApp().tt(res.msg, 'success')
				setTimeout(() => {
					uni.switchTab({
						url: '/pages/index/index'
					})
				}, 1500)
			})
			// #endif

		} else {
			if (!password.value) return uni.$u.toast('请输入密码');
			// 密码
			// #ifdef MP-WEIXIN
			uni.login({
				success: (ret) => {
					uni.$post({
						url: '/api/user/login',
						data: {
							account: mobile.value,
							password: password.value,
							group: 2,
							authcode: ret.code
						}
					}).then(res => {
						nowid.value = 1;
						const user = res.data.userinfo;
						uni.setStorageSync('user', user)
						getApp().tt(res.msg, 'success')
						setTimeout(() => {
							uni.switchTab({
								url: '/pages/index/index'
							})
						}, 1500)
					})
				}
			})
			// #endif

			// #ifndef MP-WEIXIN
			uni.$post({
				url: '/api/user/login',
				data: {
					account: mobile.value,
					password: password.value,
					group: 2,
				}
			}).then(res => {
				nowid.value = 1;
				const user = res.data.userinfo;
				uni.setStorageSync('user', user)
				getApp().tt(res.msg, 'success')
				setTimeout(() => {
					uni.switchTab({
						url: '/pages/index/index'
					})
				}, 1500)
			})
			// #endif

		}
	}
</script>

<style>
	page {
		background: #ffffff;
	}

	.pbox {
		min-height: 100vh;
		/* #ifdef H5 */
		min-height: calc(100vh - 44px);
		/* #endif */
	}

	.ibox {
		padding: 0 30rpx;
		width: 690rpx;
		height: 88rpx;
		background: #f8f8f8;
		border-radius: 44rpx 44rpx 44rpx 44rpx;
	}

	.row-line {
		width: 34rpx;
		height: 4rpx;
		background: #333333;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
	}

	.codebtn {
		min-width: 146rpx;
		padding: 0 24rpx;
		height: 44rpx;
		background: #a9d8bd;
		border-radius: 22rpx 22rpx 22rpx 22rpx;
	}

	.qiebox {
		width: 690rpx;
		height: 100rpx;
		background: #F8F8F8;
		border-radius: 50rpx 50rpx 50rpx 50rpx;
		margin-top: 76rpx;
	}

	.actbox {
		width: 345rpx;
		height: 100rpx;
		background: #01796d;
		border-radius: 50rpx 50rpx 50rpx 50rpx;
		font-size: 32rpx;
		color: #FFFFFF;
		text-align: center;
	}

	.itbox {
		width: 345rpx;
		height: 100rpx;
		background: #f8f8f8;
		border-radius: 50rpx 50rpx 50rpx 50rpx;
		font-size: 32rpx;
		color: #9D9D9D;
		text-align: center;
	}


	.r-btn {
		width: 564rpx;
		height: 100rpx;
		background: #FFFFFF;
		border-radius: 50rpx 50rpx 50rpx 50rpx;
		border: 2rpx solid #E0E0E0;
	}
</style>